react js Container Presentational Pattern 코드를 한 파일에 전부 작성하면 굉장히 길어져 가독성이 떨어져 오류가 생겨도 찾기 힘들고 특히 협업을 할 때 효율성이 떨어질 것이다. 이를 방지하지 위해 코드의 역할에 따라 파일을 나누어 놓는 것을 Container/ Presentational 패턴이라고 한다. React 코드를 살펴보면 JS(기능)부분과 JSX(UI)부분으로 나누어진다. 이 때, JS부분을 container 파일로, JSX... react jsnext jsnext js useState prev React-hook 중 하나인 useState를 하나의 함수에서 여러번 사용할 경우 원하는대로 결과가 안나오는 문제가 생길 수 있다. 아래는 카운트 값에 1,3,5,7을 차례대로 올려 결론적으로 버튼을 한 번 누르면 16이 오르길 바라고 만든 코드이다. 하지만 실제로 작동을 시켜보면 16이 아니라 7이 오른다. 받아오는 count 값이 +1,+3,+5가 된 값이 아니라 처음상태인 0에서 받아... useStatereact jsreact js State Lifting React는 데이터의 흐름이 양방향이 아니라 단방향이다. 한 컴포넌트에서 사용하고 있는 것을 부모컴포넌트 또는 형제컴포넌트에서는 사용할 수 없다. 그렇기 때문에 두 형제컴포넌트에서 같이 사용하고 싶은 기능이 있다면 그 부모 컴포넌트에 코드를 작성하고 props를 이용해 각 자식컴포넌트에서 사용해야 한다. 자식2에서는 부모에 있는 1씩 올라가는 기능을 그대로 가져와 사용했고(props 이용) ... useStatereact jsPropsState LiftingProps [React JS] #Hooks 3 useAxios.js Index.js... react jsreact js [React JS] #3. State 1. state state는 보통 우리가 동적 데이터와 함께 작업할 때 만들어진다. 동적으로 데이터를 갱신하려고 할 때 props가 아닌 state가 필요하다. state는 class component에 존재. class component class이고, react component로부터 확장되고 screen에 표시된다. react는 자동적으로 class component의 render me... react jsreact js [Redux] #3 with React 지금까지 배운 내용을 이용하여 빠르게 구현 index에서는 App.js에서 App을 받아와 root로 렌더링 App에서는 react-router-dom을 이용하여 home과 detail을 렌더링 Home.js에서는 ToDo를 구현 Hooks를 이용하여 state를 관리 index.js app.js Home.js 먼저 redux를 이용하여 store.js를 생성한다. createStore()를... react jsreact js React 03. Component 이번에는 간단하게 컴포넌트를 하나 만들어보려고 한다. 만들기에 앞서 react에는 함수기반 그리고 클래스 기반으로 코드를 작성해 나가는데 나는 여기서 함수 기반으로 코드를 작성했다. 많은 유투브에서 함수기반을 사용하기도 했고 둘 다 조금씩 접해보니 함수 기반이 뭔가 더 깔끔하고 이해하기 쉬웠기 때문에 함수 기반으로 쭉 나가기로 결정했다. 4. Component 만들기 일단은 src안에 com... Reactreact js리액트React [React JS] #2. Props 1. Props Ex) 1. Map Function을 취해서 array의 각 item에 적용 Key를 전달해야 함. React 내부에서 사용 Ex) 2. Dynamic Component 1. Check props type Props의 유무, 타입을 체크해야 함. Props types 설치 (props가 원하는 props인지 check) Npm I prop-types Code... react jsreact js
Container Presentational Pattern 코드를 한 파일에 전부 작성하면 굉장히 길어져 가독성이 떨어져 오류가 생겨도 찾기 힘들고 특히 협업을 할 때 효율성이 떨어질 것이다. 이를 방지하지 위해 코드의 역할에 따라 파일을 나누어 놓는 것을 Container/ Presentational 패턴이라고 한다. React 코드를 살펴보면 JS(기능)부분과 JSX(UI)부분으로 나누어진다. 이 때, JS부분을 container 파일로, JSX... react jsnext jsnext js useState prev React-hook 중 하나인 useState를 하나의 함수에서 여러번 사용할 경우 원하는대로 결과가 안나오는 문제가 생길 수 있다. 아래는 카운트 값에 1,3,5,7을 차례대로 올려 결론적으로 버튼을 한 번 누르면 16이 오르길 바라고 만든 코드이다. 하지만 실제로 작동을 시켜보면 16이 아니라 7이 오른다. 받아오는 count 값이 +1,+3,+5가 된 값이 아니라 처음상태인 0에서 받아... useStatereact jsreact js State Lifting React는 데이터의 흐름이 양방향이 아니라 단방향이다. 한 컴포넌트에서 사용하고 있는 것을 부모컴포넌트 또는 형제컴포넌트에서는 사용할 수 없다. 그렇기 때문에 두 형제컴포넌트에서 같이 사용하고 싶은 기능이 있다면 그 부모 컴포넌트에 코드를 작성하고 props를 이용해 각 자식컴포넌트에서 사용해야 한다. 자식2에서는 부모에 있는 1씩 올라가는 기능을 그대로 가져와 사용했고(props 이용) ... useStatereact jsPropsState LiftingProps [React JS] #Hooks 3 useAxios.js Index.js... react jsreact js [React JS] #3. State 1. state state는 보통 우리가 동적 데이터와 함께 작업할 때 만들어진다. 동적으로 데이터를 갱신하려고 할 때 props가 아닌 state가 필요하다. state는 class component에 존재. class component class이고, react component로부터 확장되고 screen에 표시된다. react는 자동적으로 class component의 render me... react jsreact js [Redux] #3 with React 지금까지 배운 내용을 이용하여 빠르게 구현 index에서는 App.js에서 App을 받아와 root로 렌더링 App에서는 react-router-dom을 이용하여 home과 detail을 렌더링 Home.js에서는 ToDo를 구현 Hooks를 이용하여 state를 관리 index.js app.js Home.js 먼저 redux를 이용하여 store.js를 생성한다. createStore()를... react jsreact js React 03. Component 이번에는 간단하게 컴포넌트를 하나 만들어보려고 한다. 만들기에 앞서 react에는 함수기반 그리고 클래스 기반으로 코드를 작성해 나가는데 나는 여기서 함수 기반으로 코드를 작성했다. 많은 유투브에서 함수기반을 사용하기도 했고 둘 다 조금씩 접해보니 함수 기반이 뭔가 더 깔끔하고 이해하기 쉬웠기 때문에 함수 기반으로 쭉 나가기로 결정했다. 4. Component 만들기 일단은 src안에 com... Reactreact js리액트React [React JS] #2. Props 1. Props Ex) 1. Map Function을 취해서 array의 각 item에 적용 Key를 전달해야 함. React 내부에서 사용 Ex) 2. Dynamic Component 1. Check props type Props의 유무, 타입을 체크해야 함. Props types 설치 (props가 원하는 props인지 check) Npm I prop-types Code... react jsreact js